<template lang="html">
  <div>
    <v-header/>
    <div class="index">
      <v-swiper class="swipe" :swiperData="data.swiper"/>
      <div class="item">
        <router-link class="my-vip-top ho" :to="{ path: '/notice'}">
          <img src="../assets/gonggao.png" class="image">
          <p >公告</p>
        </router-link>
        <div class="item1" @click='signIn'>
          <img src="../assets/qiandao.png" class="image">
          <p >签到</p>
        </div>
      </div>
      <v-section1 :list="data.section" class="section"/>
      <v-footer/>
    </div>
  </div>

</template>

<script>
import Header from '@/components/index/header.vue'
import Swiper from '@/components/index/swiper.vue'
import Service from '@/components/index/service.vue'
import Section1 from '@/components/index/section1.vue'
import Footer from '@/common/_footer.vue'
import {appIndexList, signIn} from '@/http/api'
import {Toast} from 'mint-ui'

export default {
  components: {
    'v-header': Header,
    'v-swiper': Swiper,
    'v-service': Service,
    'v-section1': Section1,
    'v-footer': Footer
  },
  data() {
    return {
      data: {
        section: {},
        swiper: []
      },
      loading: true
    }
  },
  methods: {
    async getBannerList() {
      const res = await appIndexList()
      if (res.code * 1 === 200) {
        this.data.swiper = res.data.banner
        this.data.section = res.data.goods
      }
    },
    async signIn() {
      const user = JSON.parse(localStorage.getItem('UserMessage'))
      const data = {
        uid: user.user.uid
      }
      const res = await signIn(data)
      if (res.code * 1 === 200) {
        Toast('签到成功')
      }
    }
  },
  created() {
    this.getBannerList()
  }
}
</script>

<style lang="less" scoped>

.index {
  width: 100%;
  background-color: #f5f5f5;
  padding: 0 10px 80px;
  box-sizing: border-box;
  margin-top: 10px;
}

.item {
  width: 100%;
  margin: 0 auto;
  background-color: #FFFFFF;
  text-align: center;
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  border-radius: 6px;
  overflow: hidden;
  justify-content: space-around;
  padding: 10px 0;
  .image {
      margin: 0 auto;
      width: 2.5em;
      height: 2.5em;
    }
  p {
    margin-top: 6px;
  }
}

//
.swipe {
  border-radius: 6px;
  overflow: hidden;
}
</style>
